<template>
    <div>
        <el-row>
            <img :src="require('../../assets/yyt/img-01.jpg')">
        </el-row>
        <el-row>
            <el-steps :active="2" finish-status="success" simple style="width: 50%;margin-top:20px;margin-left:100px">
                <el-step title="1.填写号码、金额"></el-step>
                <el-step title="2.确认并支付"></el-step>
                <el-step title="3.完成"></el-step>
            </el-steps>
        </el-row>
        <el-row>
            <div>
                <!-- 浅绿色背景框 -->
                <el-card class="order-card"
                    style="background-color: #f0f9eb;width:65%;margin-left:100px;margin-top: 20px;">
                    <!-- 提示信息 -->
                    <div class="order-info">
                        <div style="color: green;">
                            订单已于 <span style="color: red;">{{ formattedCreateTime }}</span> 提交成功，请您尽快支付！
                        </div>
                        <div class="order-details" style="margin-top: 20px;">
                            订单号: {{ this.order.idStr }} &nbsp;&nbsp;|&nbsp;&nbsp; 应付金额:&nbsp;
                            <div style="color: red; display: inline;">￥{{ this.order.payPrice }}</div> 元
                        </div>
                    </div>
                    <!-- 充值号码 -->
                    <div style="margin-top: 20px;">
                        充值号码：<span style="color: blue;">{{ this.order.userTelephone }}</span>
                    </div>
                    <!-- 支付提示 -->
                    <div style="margin-top: 20px;">
                        请您在提交订单后<span style="color: orange;">15分钟</span>内完成支付,否则订单会自动取消。
                    </div>
                    <el-row style="margin-top: 40px;">
                        <el-col :span="3">
                            支付方式: &nbsp;&nbsp;
                        </el-col>
                        <el-col :span="1">
                            <el-radio v-model="radio" label="1">
                                <label style="display: none;"></label>
                            </el-radio>
                        </el-col>
                        <el-col :span="4">
                            <span class="radio-content">
                                <img :src="require('../../assets/yyt/alipay.jpg')">
                            </span>
                        </el-col>
                    </el-row>
                </el-card>
                <el-row style="margin-left: 900px;margin-top:20px">
                    <el-button type="primary" @click="pay">确认支付</el-button>
                </el-row>
            </div>
            <div>
                <el-dialog :visible.sync="dialogVisible" height="1000px" width="1100px">
                    <iframe id="alipayFrame" style="width: 1000px;height:1000px"></iframe>
                </el-dialog>
            </div>
            <img id="qrious" />
        </el-row>
        <div v-loading="loading">
            <!-- 其他元素... -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            order: {

            },
            radio: '',
            qrCode: null,
            dialogVisible: false,
            loading: false,
            iframe: null,
            price: '',
            id: ''
        }
    },
    methods: {
        pay() {
            if (!this.radio) {
                this.$message.error("请选择支付方式")
                return;
            }
            // 开启遮罩
            this.loading = true;
            this.$axios.post("/api/staffOrder/alipay/getPayHtml?orderNum=" + this.order.idStr).
                then(response => {
                    // 延迟5秒弹出支付对话框
                    setTimeout(() => {
                        this.dialogVisible = true;
                    }, 3000); // 5000毫秒即5秒

                    // iframe形式
                    const iframe = document.getElementById('alipayFrame');
                    if (!iframe) {
                        return;
                    }
                    iframe.srcdoc = response.data;
                    // 发起轮询
                    this.pollingPayStatus();
                })
                .catch(error => {
                    // 这里处理错误
                    console.log(error);
                })
                .finally(() => {
                    // 关闭遮罩
                    this.loading = false;

                });
        },
        pollingPayStatus() {
            const intervalId = setInterval(() => {
                this.$axios.get('/api/productOrder/queryOrderByOrderNum?orderNum=' + this.order.idStr)
                    .then(response => {
                        let order = response.data.data;
                        if (order.status == 4) {
                            clearInterval(intervalId); // 停止轮询
                            this.updatePhoneBill();
                            this.updateUsersCoupon()
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }, 1000); // 每隔5秒发送一次请求
        },
        //增加用户话费
        updatePhoneBill() {
            let param = {};
            param.totalPrice = this.price;
            param.phone = this.order.userTelephone;
            this.$axios.post('api/zgyd-user/updatePhoneBill', param)
                .then(res => {
                    if (res.data.code == 200) {
                        // 可以执行其他操作，比如跳转页面等
                        this.$router.push({ path: '/recharge' })
                    }
                })
        },
        //扣优惠券
        updateUsersCoupon() {
            if (this.id) {
                this.$axios.get('api/zgyd-jifen/updateUsersCoupon/' + this.id)
                    .then(res => {

                    })
            }
        }
    },
    created() {
        let storedOrder = localStorage.getItem('order');
        this.order = JSON.parse(storedOrder);
        this.orderNum = this.order.id;
        this.price = this.order.payPrice;
        this.id = this.$route.query.id;
        console.log(this.id)
    },
    computed: {
        formattedCreateTime() {
            if (!this.order.createTime) {
                return '';
            }
            const date = new Date(this.order.createTime);
            date.setHours(date.getHours() - 8);  // 手动添加8小时
            return new Intl.DateTimeFormat('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            }).format(date).replace(/\//g, '-');
        }
    },
}
</script>

<style scoped>
.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}

.order-card {
    padding: 20px;
}

.order-info {
    display: flex;
    flex-direction: column;
}

.order-details {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.radio-content {
    display: flex;
    align-items: center;
}

.payment-img {
    position: absolute;
    top: -5px;
    /* 调整图片的垂直位置 */
    left: 0;
}

.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}
</style>